<template>
<section class="section-box">
    <section-title>
        <h3>项目与作品</h3>
        <p>My works</p>
    </section-title>
    <div class="project-content">
        <div class="project-item" v-for="item in works" :key="item.title">
            <project :data="item"></project>
        </div>
    </div>
</section>
</template>

<script>
import sectionTitle from "@/components/section-title";
import project from "@/components/project";
import {
    fetchWorks
} from "../api";

export default {
    name: "MyWorks",
    data() {
        return {
            works: [],
        };
    },
    components: {
        sectionTitle,
        project,
    },
    methods: {
        fetchWorks() {
            fetchWorks()
                .then((res) => {
                    this.works = res.data || [];
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    mounted() {
        this.fetchWorks();
    },
};
</script>

<style lang="less" scoped>
.section-box {
    width: 100%;

    .project-content {
        position: relative;
        display: flex;
        flex-flow: wrap;
        margin-top: 10px;
        align-content: space-around;

        .project-item {
            margin-top: 10px;
            padding-right: 10px;
        }
    }
}

@media (max-width: 1011px) {
    .section-box {
        .project-content {
            justify-content: space-between;
        }
    }
}

@media (max-width: 800px) {
    .section-box {
        .project-content {
            justify-content: center;
        }
    }
}
</style>
